<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gemini Live API Demo</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Gemini Live API Demo</h1>
        <div style="display: flex; gap: 10px; align-items: center">
          <div id="status" class="status disconnected">Disconnected</div>
        </div>
      </header>

      <main>
        <div class="auth-section" id="auth-section">
          <div
            class="description-box"
            style="
              margin-bottom: 20px;
              padding: 15px;
              background: #f5f5f5;
              border-radius: 8px;
              text-align: left;
            "
          >
            <h3>Features Enabled:</h3>
            <ul style="margin: 10px 0 20px 20px">
              <li>
                <strong>Native Audio:</strong> Low latency voice interaction
              </li>
              <li>
                <strong>Multilingual:</strong> Speak in different languages
              </li>
              <li>
                <strong>Proactive Audio:</strong> Gemini can initiate speech
                based on instructions E.g. "Only talk when I mention food"
              </li>
              <li><strong>Affective Audio:</strong> Emotional tone matching</li>
            </ul>
            <p>
              <em
                >Note: When you connect, the app sends a text message to Gemini
                instructing it to introduce itself and these features.</em
              >
            </p>
          </div>
          <p>Click below to connect.</p>
          <button id="connectBtn" class="btn">Connect</button>
        </div>

        <div class="session-end-section hidden" id="session-end-section">
          <h2>Session Ended</h2>
          <button id="restartBtn" class="btn">Start New Session</button>
        </div>

        <div class="app-section hidden" id="app-section">
          <div class="app-grid">
            <div class="left-panel">
              <div class="video-container">
                <div id="video-placeholder">Start camera to send video</div>
                <video id="video-preview" autoplay playsinline muted></video>
                <canvas id="video-canvas" style="display: none"></canvas>
              </div>

              <div class="controls">
                <button id="micBtn" class="btn icon-btn">Start Mic</button>
                <button id="cameraBtn" class="btn icon-btn">
                  Start Camera
                </button>
                <button id="disconnectBtn" class="btn icon-btn danger">
                  Disconnect
                </button>
              </div>
            </div>

            <div class="right-panel">
              <div class="chat-log" id="chat-log"></div>
              <div class="input-area">
                <input
                  type="text"
                  id="textInput"
                  placeholder="Type a message..."
                />
                <button id="sendBtn" class="btn">Send</button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
    <script src="/static/media-handler.js"></script>
    <script src="/static/gemini-client.js"></script>
    <script src="/static/main.js"></script>
  </body>
</html>
